<template>
  <div class="shouye-index" >
    <div class="f-title"> {{ logoTitle }}</div>
    <div class="introduce">绥化综合地理信息服务平台中“一张图”模块通过接入工作底图数据服务，利用地理信息数据可视化表达，将各类空间数据、业务数据、监测数据统一至标准界面上进行展示和管理。</div>

    <div class="menu_items">
      <div
        v-for="(cont,index) in visViews"
        :key="index"
      >
        <div class="fun-div"   @click="gotoNewWindow(cont)">
          <div :class="cont.icon" class="img-div"></div>
          <div> {{ cont.title }}</div>
        </div>
      </div>
    </div>
    <el-button v-hasPermi="['mapyzt:updateip']" @click="ShowYZTIP" style="right: 50px;position: absolute;width:100px;bottom:0px;z-index:9999">地图配置</el-button>
    <div v-if="showConIP===true" v-hasPermi="['mapyzt:updateip']" style="left: 0px;position: absolute;width:150px;bottom:0px;z-index:9999">

      <el-input  v-model="inputOldIP" placeholder="旧ip，例如192.168.3.999"></el-input>
      <el-input  v-model="inputNewIP" placeholder="新ip"></el-input>
      <el-button @click="UpdateYZTIP">确认修改</el-button>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <!--      <span>Copyright © 2022  All Rights Reserved.</span>-->
    </div>
  </div>
</template>

<script>
// import { mapGetters, mapState } from 'vuex'
// import Logo from "./Logo";
import SidebarItem from '@/layout/components/Sidebar/SidebarItem'
import variables from '@/assets/styles/variables.scss'
// import gConfig from '@/utils/GlobalConfig'
import { isExternal } from '@/utils/validate'
import path from 'path'
import request, { requestBaseUrl } from '@/utils/request'

export default {
  name: 'mapyzt',
  data() {
    return {
      showConIP:false,
      inputOldIP:null,
      inputNewIP:null,
      // 版本号
      version: '3.8.2',
      logoTitle: null,
      item: {},
      visViews: [
        {
          icon: 'yizhangtuicon',
          name: 'mapyzt',
          title: '一张图',
          windowurl:gConfig.spbtdir.yztFronturl+"inCoInterface",
        },

      ]
      // item:this.sidebarRouters[8].children[0],
    }
  },
  // components: { SidebarItem },
  computed: {
    // ...mapState(['settings']),
    // ...mapGetters(['sidebarRouters', 'sidebar']),
    // visitedViews() {
    //   return this.$store.state.tagsView.visitedViews
    // },
    //
    // activeMenu() {
    //   const route = this.$route
    //   const { meta, path } = route
    //   // if set path, the sidebar will highlight the path you set
    //   if (meta.activeMenu) {
    //     return meta.activeMenu
    //   }
    //   return path
    // },
    // showLogo() {
    //   return this.$store.state.settings.sidebarLogo
    // },
    // variables() {
    //   return variables
    // },
    // isCollapse() {
    //   return !this.sidebar.opened
    // }
  },
  created() {
    // this.logoTitle = process.env.VUE_APP_TITLE
    this.logoTitle ="“一张图”系统"
    // this.item = this.sidebarRouters[8].children[0]
    this.gotoNewWindow(this.visViews[0])
  },
  mounted() {
    // this.item=sidebarRouters;
  },
  methods: {
    gotoNewWindow(tag){
      window.open(tag.windowurl);
    },
    ShowYZTIP(){
      this.showConIP=!this.showConIP;
    },
    UpdateYZTIP(){
      if(this.inputNewIP===null ||this.inputOldIP===null ){
        alert("必须输入IP");
        return;
      }
      let data={
        oldip:this.inputOldIP,
        newip:this.inputNewIP,
        }
      request({
        url: '/gbzCommon/updateyztip',
        method: 'put',
        params: data
      }).then(response => {
        alert("完成");
      })
    },
  }
}
</script>

<style scoped lang="scss">
.f-body {
  margin: 40px;
}
.introduce{
  max-width: 640px;
  /* display: block; */
  margin: 20px auto;
  text-align: left;
  color: #058b47;
  font-size: 23px;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  background-color: #ffffffcc;
  padding: 10px;
  border-radius: 20px;
}
.fun-div {
  //width: 20vw;
  //height: 25vh;
  width: 200px;
  height: 160px;
  background-color: rgba(242, 248, 251, 1);
  margin: 20px 30px 40px 30px;
  cursor: pointer;
  //justify-content: center;
  //align-items: end;
  display: inline-block;
  font-size: x-large;
  border-radius:20px;
  //background-position: center 10px;
  /* 背景图不平铺 */
  //background-repeat: no-repeat;
  /* 让背景图基于容器大小伸缩 */
  //background-size: auto;
  padding-bottom: 6px;
  -webkit-transition:0.4s;
}

.fun-div:hover {
  background-color: #ddfede;
  //font-size: xx-large;
  //font-weight: bolder;
}
.img-div{
  //width: 15vw;
  //height: 19vh;
  width: 100px;
  height: 100px;
  background-size: cover;
  display: inline-block;
  margin-top: 10px;
}
.f-title {
  //position: absolute;
  //top: 20px;
  color: #058b47;
  font-size: 48px;
  font-weight: bold;
  padding-top: 40px;
}

.yizhangtuicon {
  background-image: url("~@/assets/images/icon/yzticon.png");
}
.charticon {
  background-image: url("~@/assets/images/icon/charticon.png");
}
.gbzcbicon {
  background-image: url("~@/assets/images/icon/gbzcbicon.png");
}
.todoicon {
  background-image: url("~@/assets/images/icon/todoicon.png");
}
.doneicon {
  background-image: url("~@/assets/images/icon/doneicon.png");
}

.topTitle {
  /*padding: 20px;*/
  /*background: rgba(255, 255, 255, 0);*/
  text-align: center;
}

.shouye-index {
  position: fixed;
  height: 100%;
  background-image: url("~@/assets/images/index-background.jpg");
  background-size: cover;
  text-align: center;
  width: 100%;
  top: 0px;
  z-index: 8;
  padding-top: 70px;
}


h4 {
  margin-top: 0px;
}

.el-row {
  display: initial;
}

.el-col {
  border-radius: 4px;
  //background-color: #1c84c6;
  min-height: 36px;
}

.menu_items, .menu_items2 {
  //height: calc(100% - 200px);
  display: block;
  margin: 20px auto;
  text-align: center;
  max-width: 800px;
}

.menuList, .menuListWrap {
  //display: -webkit-box;
  //display: -ms-flexbox;
  display: flex;
  //-webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

</style>

